<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>视频监控</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/vxgplayer-1.8.40.min.css">
    <link rel="stylesheet" type="text/css" href="../css/bean.css" />
    <link rel="stylesheet" href="../css/scenicSpotList.css">
</head>

<body>
    <div class="guding">
        <nav class="navbar navbar-default g-nav">
            <span class="navbar-brand">全域旅游综合信息服务平台</span>
            <div class=" navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/html/home.html">首页</a></li>
                    <li>
                        <a href="/html/realTimeTraffic.html">智慧分析</a>
                        <div class="sub-nav">
                            <a class="sub-nav-item" href="/html/realTimeTraffic.html">实时客流</a>
                            <a class="sub-nav-item" href="/html/touristPortrait.html">游客画像</a>
                        </div>
                    </li>
                    <li>
                        <a class="active" href="/html/demoareaSupervise.html">智慧监管</a>
                        <div class="sub-nav">
                            <a class="sub-nav-item" href="/html/demoareaSupervise.html">示范区监管</a>
                            <a class="sub-nav-item active" href="/html/scenicSpotList.html">视频监控</a>
                            <a class="sub-nav-item" href="/html/safetyWarning.html">安全预警</a>
                            <a class="sub-nav-item" href="/html/wisdomSupervise_guide.html">旅游产业数据</a>
                            <a class="sub-nav-item" href="/html/complaints.html">投诉举报管理</a>
                        </div>
                    </li>
                    <li><a href="/html/resources.html">旅游资源</a></li>
                </ul>
            </div>
        </nav>
    </div>
    </div>
    <!--导航结束-->
    <div class="content pos-relative" style="width: 1920px;">
        <div class="search-box">
            <input type="text" placeholder="关键字搜索">
        </div>
        <div class="sidebar backgroundfff border">
            <ul class="city-nav">
                <li>
                    <div class="city-nav-item active">热门</div>
                </li>
                <li>
                    <div id="chengdu" class="city-nav-item city-nav-item__first-level">
                        <span>成都市</span>
                    </div>
                    <div class="scenic-spot-nav">
                        <div id="dujiangyan" class="city-nav-item city-nav-item__second-level">都江堰</div>
                        <div class="city-nav-item city-nav-item__second-level">武侯祠</div>
                        <div class="city-nav-item city-nav-item__second-level">青城山</div>
                    </div>
                </li>
                <li>
                    <div class="city-nav-item">绵阳市</div>
                </li>
                <li>
                    <div class="city-nav-item">自贡市</div>
                </li>
                <li>
                    <div class="city-nav-item">攀枝花市</div>
                </li>
                <li>
                    <div class="city-nav-item">泸州市</div>
                </li>
            </ul>
        </div>
        <div class="scenic-spot-list">
            <div class="scenic-spot-box backgroundfff border">
                <figure>
                    <img src="../img/demo/dujiangyan.png" alt="都江堰" />
                    <figcaption>
                        <span>都江堰 5A</span>
                        <span>今日接待：15035人</span>
                    </figcaption>
                </figure>
                <div class="scenic-spot-box__detail flex">
                    <div class="scenic-spot-box__detail-left">
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">游客满意度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                            </div>
                        </div>
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">景区舒适度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                    </div>
                    <div class="scenic-spot-box__detail-right">
                        <div class="scenic-spot-persons">
                            <span>当前人数：7192人</span>
                            <span>最大承载人数: 60000人</span>
                        </div>
                        <div class="scenic-spot-bar">
                            <div class="scenic-spot-bar__value" style="width: 12%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scenic-spot-box backgroundfff border">
                <figure>
                    <img src="../img/demo/emeishan.png" alt="峨眉山"/>
                    <figcaption>
                        <span>峨眉山 5A</span>
                        <span>今日接待：11258人</span>
                    </figcaption>
                </figure>
                <div class="scenic-spot-box__detail flex">
                    <div class="scenic-spot-box__detail-left">
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">游客满意度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                            </div>
                        </div>
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">景区舒适度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                    </div>
                    <div class="scenic-spot-box__detail-right">
                        <div class="scenic-spot-persons">
                            <span>当前人数：8139人</span>
                            <span>最大承载人数: 45000人</span>
                        </div>
                        <div class="scenic-spot-bar">
                            <div class="scenic-spot-bar__value" style="width: 18%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scenic-spot-box backgroundfff border">
                <figure>
                    <img src="../img/demo/jiuzaigou.png" alt="九寨沟"/>
                    <figcaption>
                        <span>九寨沟 5A</span>
                        <span>今日接待：5021人</span>
                    </figcaption>
                </figure>
                <div class="scenic-spot-box__detail flex">
                    <div class="scenic-spot-box__detail-left">
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">游客满意度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                            </div>
                        </div>
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">景区舒适度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                    </div>
                    <div class="scenic-spot-box__detail-right">
                        <div class="scenic-spot-persons">
                            <span>当前人数：4960人</span>
                            <span>最大承载人数: 41000人</span>
                        </div>
                        <div class="scenic-spot-bar">
                            <div class="scenic-spot-bar__value" style="width: 12%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scenic-spot-box backgroundfff border">
                <figure>
                    <img src="../img/demo/leshandafo.png" alt="乐山大佛"/>
                    <figcaption>
                        <span>乐山大佛 5A</span>
                        <span>今日接待：14083人</span>
                    </figcaption>
                </figure>
                <div class="scenic-spot-box__detail flex">
                    <div class="scenic-spot-box__detail-left">
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">游客满意度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">景区舒适度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                    </div>
                    <div class="scenic-spot-box__detail-right">
                        <div class="scenic-spot-persons">
                            <span>当前人数：12977人</span>
                            <span>最大承载人数: 40000人</span>
                        </div>
                        <div class="scenic-spot-bar">
                            <div class="scenic-spot-bar__value" style="width: 32.4%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scenic-spot-box backgroundfff border">
                <figure>
                    <img src="../img/demo/qingchengshan.png" alt="青城山"/>
                    <figcaption>
                        <span>青城山 5A</span>
                        <span>今日接待：9667人</span>
                    </figcaption>
                </figure>
                <div class="scenic-spot-box__detail flex">
                    <div class="scenic-spot-box__detail-left">
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">游客满意度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">景区舒适度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                    </div>
                    <div class="scenic-spot-box__detail-right">
                        <div class="scenic-spot-persons">
                            <span>当前人数：5736人</span>
                            <span>最大承载人数: 32000人</span>
                        </div>
                        <div class="scenic-spot-bar">
                            <div class="scenic-spot-bar__value" style="width: 18%;"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scenic-spot-box backgroundfff border">
                <figure>
                    <img src="../img/demo/wohouci.png" alt="武侯祠"/>
                    <figcaption>
                        <span>武侯祠 4A</span>
                        <span>今日接待：3207人</span>
                    </figcaption>
                </figure>
                <div class="scenic-spot-box__detail flex">
                    <div class="scenic-spot-box__detail-left">
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">游客满意度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                        <div class="satisfaction-degree">
                            <div class="satisfaction-degree__title">景区舒适度</div>
                            <div class="satisfaction-degree__value">
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star"></span>
                                <span class="star_empty"></span>
                                <span class="star_empty"></span>
                            </div>
                        </div>
                    </div>
                    <div class="scenic-spot-box__detail-right">
                        <div class="scenic-spot-persons">
                            <span>当前人数：2680人</span>
                            <span>最大承载人数: 11000人</span>
                        </div>
                        <div class="scenic-spot-bar">
                            <div class="scenic-spot-bar__value" style="width: 24.3%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-list">
            <div class="video-box backgroundfff border">
                <div class="shadow"></div>
                <div class="play-button"></div>
                <figure>
                    <img src="../img/video_demo_1.jpg" alt="都江堰" />
                    <figcaption>
                        <span>都江堰视频点一</span>
                    </figcaption>
                </figure>
            </div>
            <div class="video-box backgroundfff border">
                <div class="shadow"></div>
                <div class="play-button"></div>
                <figure>
                    <img src="../img/video_demo_2.jpg" alt="都江堰" />
                    <figcaption>
                        <span>都江堰视频点二</span>
                    </figcaption>
                </figure>
            </div>
            <div class="video-box backgroundfff border">
                <div class="shadow"></div>
                <div class="play-button"></div>
                <figure>
                    <img src="../img/video_demo_3.jpg" alt="都江堰" />
                    <figcaption>
                        <span>都江堰视频点三</span>
                    </figcaption>
                </figure>
            </div>
            <div class="video-box backgroundfff border">
                <div class="shadow"></div>
                <div class="play-button"></div>
                <figure>
                    <img src="../img/video_demo_4.jpg" alt="都江堰" />
                    <figcaption>
                        <span>都江堰视频点四</span>
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
     <div class="mask"></div>
        <div class="dialog" style="width: 700px;height: 580px; margin-left: -350px;margin-top: -290px;">
        <div class="dialog-close-button"></div>
        <div class="dialog-title">都江堰视频点一</div>
        <div class="dialog-content">
            <div id="vxg"></div>
        </div>
    </div>
    <script src="../js/jquery-2.1.0.js"></script>
    <script src="../js/lodash.js"></script>
    <script src="../js/vxgplayer-1.8.40.min.js"></script>
    <script src="../js/scenicSpotList.js"></script>
</body>

</html>
